<template>
    <Form :model="formItem" :label-width="80">
        <FormItem label="公司名称">
            <Input v-model="formItem.companyName" placeholder="请输入公司名称"></Input>
        </FormItem>
        <FormItem label="公司简介(中)">
            <Input v-model="formItem.introduce" placeholder="请输入公司简介"></Input>
        </FormItem>
        <FormItem label="公司简介(英)">
            <Input v-model="formItem.engIntroduce" placeholder="请输入公司简介"></Input>
        </FormItem>
        <FormItem label="公司简介(日)">
            <Input v-model="formItem.jpnIntroduce" placeholder="请输入公司简介"></Input>
        </FormItem>        
        
        <FormItem label="联系地址">
            <Input v-model="formItem.contactArea" placeholder="请输入联系地址"></Input>
        </FormItem>
        

        <FormItem label="联系人">
            <Input v-model="formItem.contactPerson" placeholder="请输入联系人"></Input>
        </FormItem>
        
        <FormItem label="联系电话">
            <Input v-model="formItem.contactPhone" placeholder="请输入联系电话"></Input>
        </FormItem>        

		<FormItem label="二维码图片">
			<Upload :action="$baseUrl+'uploadFile/upload/file'" name="file" 
				:show-upload-list="false" :format="['jpg','png']" 
				:max-size="10*1024" :on-success="handleSuccess" 
				:on-format-error="formatError" 
				:on-exceeded-size="exceededSize">
				<Button icon="ios-cloud-upload-outline">上传封面</Button>
			</Upload>
		</FormItem>

		<FormItem label="" v-show="imgList.length>0">
			<div class="img-item" v-for="(item,index) in imgList" :key="index">
				<div class="wrap-head">
					<img :src="item.fileUrl" alt="" />
				</div>
				<div class="wrap-foot" @click="delImg(index)">
					<Icon type="ios-trash-outline" size="20" />
				</div>
			</div>
		</FormItem>


        <FormItem>
            <Button type="primary" @click="confirm">确认</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
            	imgList: [],
                formItem: {}
            }
        },
        methods: {
			// 图片上传成功后执行
			handleSuccess(response, file, fileList) {
				this.imgList = []
				this.imgList.push(response)
			},
			delImg(index) {
				this.imgList.splice(index, 1);
			},			
			// 文件格式错误
			formatError() {
				this.$Notice.error({
					title: '文件格式只支持jpg,png',
					desc: false
				});
			},
			// 文件大小超出
			exceededSize() {
				this.$Notice.error({
					title: '文件大小超出10M',
					desc: false
				});
			},        	
        	init(){
        		this.$Axios.Get(this.$baseUrl+'contact_info/list').then(res => {
        			this.formItem=res[0]
        			this.imgList=[]
        			this.imgList.push(res[0].uploadFile)        			
        		})
        	},
			afterRequest(B) {
				if(B) {
					this.$Notice.success({
						title: '操作成功',
						desc: false
					});
					this.init()
				} else {
					this.$Notice.error({
						title: '操作失败',
						desc: false
					});
				}
			},        	
        	confirm(){
        		this.formItem.fileId = this.imgList[0].id
				this.$Axios.Post(this.$baseUrl+'contact_info/update',this.formItem).then(res => {
					this.afterRequest(res)
				})
        	}
        },
		mounted() {
           this.init()
		}        
    }
</script>
<style scoped="">
	.fuzhu {
		margin-left: 10px;
		color: #BCBCBC;
	}
	
	.img-item {
		width: 100px;
		border: 1px solid #BCBCBC;
		float: left;
		margin-right: 4px;
	}
	
	.wrap-head {
		width: 100%;
		height: 100px;
	}
	
	.img-item img {
		width: 100%;
		height: 100%;
	}
	
	.wrap-foot {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
	}	
</style>